import { Tabs } from "antd"
import styles from './SideBar.module.less'
import { useContext } from "react"
import { AppContext } from "../../../core"
import Static from '../dragger/Static';
import Fixed from "../dragger/Fixed";

export interface ISideBarProps {
    items: {
        label: string
        key: string
    }[]
}

export const SideBar = ({items}: ISideBarProps) => {
    const {slots} = useContext(AppContext);
    console.log(slots)

    return <div className={styles.sidebar}>
        <Tabs rootClassName="sidebarTabs" tabPosition="left" items={items.map((item) => {
            const sideBar = slots.sideBar.find(item => item.slot === 'sideBar');
            const list = Array.isArray(sideBar?.component) && sideBar?.component.filter(module => module.props?.tab === item.key)
            console.log('list', list)
            return {
                ...item,
                children: <div className={styles.tabContainer}>
                    {
                        Array.isArray(list) && list.map(module => {
                            const Drag = module.props!.type === 'fixed' ? Fixed : Static;
                            return <div key={module.props!.name as string} className={styles.item}>
                                
                                <Drag {...module.props}>
                                    <>
                                        <div className={styles.pic}>
                                            <img src={module.props?.pic as string || undefined}></img>
                                        </div>
                                        <div className={styles.name} title={module.props?.title as string}>
                                            { module.props?.title as React.ReactNode || null }
                                        </div>
                                    </>
                                </Drag>
                            </div>
                        })
                    }
                </div>
            }
        })}/>
    </div>
}